<template>
	<view class="container">
		<view class="left">
			<scroll-view scroll-y="true" style="height: 100vh;">
				<view :class="['left-item', current == i ? 'active' : '']" v-for="(item, i) in 20" :key="i" @tap="currentChange(i)">
					理疗
				</view>
			</scroll-view>
		</view>
		<view class="right">
			<scroll-view scroll-y="true" style="height: 100vh;">
				<view class="right-list">
					<view class="right-item" v-for="(item, i) in 20" :key="i" @tap="goReservation">
						针刺
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	const current = ref(0)
	const currentChange = e => {
		current.value = e
	}
	
	// 跳转到预约列表
	const goReservation = () => {
		uni.navigateTo({
			url: '/mine/reservation/reservation'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		@include center(100%);
		.left {
			width: 200rpx;
			background: #FFFFFF;
			height: 100vh;
			.left-item {
				@include center(200rpx);
				font-size: 32rpx;
				color: #606672;
				padding: 40rpx;
			}
			.active {
				font-size: 40rpx;
				color: #D66A44;
			}
		}
		.right {
			flex: 1;
			.right-list {
				padding: 30rpx 26rpx;
				.right-item {
					background: #FFFFFF;
					border-radius: 10rpx;
					padding: 34rpx 30rpx;
					font-size: 30rpx;
					color: #444444;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>
